$(function () {
    //1-页面加载后，在页面渲染第一屏用户数据

    var currentPage = 1;
    var pageSize = 5;
    render();

    function render() {
        $.ajax({
            url: '/category/querySecondCategoryPaging',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (info) {
                console.log(info);
                //渲染数据
                $('tbody').html(template('tmp', info));
                //根据后台返回的总数 生成分页标签
                $('#paginator').bootstrapPaginator({
                    bootstrapMajorVersion: 3,
                    currentPage: currentPage, //当前页
                    totalPages: Math.ceil(info.total / info.size), //总页数
                    onPageClicked: function (_, _, _, page) {
                        currentPage = page;
                        render(); //渲染对应页面
                    }
                });
            }
        })
    }
    //2- 填充下拉列表数据
    $.ajax({
        url: '/category/queryTopCategoryPaging',
        //模拟获取全部一级分类数据
        data: {
            page: 1,
            pageSize: 1000
        },
        dataType: 'json',
        success: function (info) {
            console.log(info);
            //渲染列表
            $('.cate-list').html(template('tmp-cate', info));
        }
    });

    //使用事件委托 给ul下的每一个a动态绑定点击事件  点击时获取内容
    // 3-点击下拉列表，显示选中结果
    $('.cate-list').on('click', 'a', function () {
        //获取当前a标签id 和 文本 
        $('.cate-text').text($(this).text());
        //当前选中分类id 赋值给 隐藏域
        $('.categoryId').val($(this).data('id'));

        //将校验结果改完校验成功
        $("#form").data('bootstrapValidator').updateStatus('categoryId', 'VALID');
    });

    //4-上传二级分类图片
    $('#file').fileupload({
        dataType: 'json',
        // 图片上传成功的回调
        // e 事件对象
        // data 会返回图片在服务器的信息
        done: function (e, data) {
            console.log(data);
            //获取服务器中保存图片地址
            var url = data.result.picAddr;
            // 显示赋值给img的src
            $('.logo').attr('src', url);
            // 将服务器存储的图片地址 存放到隐藏域中
            $('.hide-logo').val(url);
            //将校验结果改完校验成功
            $("#form").data('bootstrapValidator').updateStatus('brandLogo', 'VALID');
        }
    })
    //5-做表单数据校验（数据不能为空）
    $('#form').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [], //让隐藏的元素页被校验
        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        //验证字段
        fields: {
            categoryId: {
                validators: {
                    notEmpty: {
                        message: '一级分类不能为空'
                    }
                }
            },
            brandName: {
                validators: {
                    notEmpty: {
                        message: '品牌名称不能为空'
                    }
                }
            },
            brandLogo: {
                validators: {
                    notEmpty: {
                        message: 'logo不能为空'
                    }
                }
            }
        }
    });
    //6-在表单数据校验通过的情况，通过ajax将数据提交给服务器，添加完成后，页面重新渲染
    $('#form').on('success.form.bv', function (e) {
        //阻止submit的默认行为
        e.preventDefault();
        //通过ajax将数据提交给服务器
        $.ajax({
            url: '/category/addSecondCategory',
            type: 'post',
            data: $('#form').serialize(),
            dataType: 'json',
            success: function (info) {
                console.log(info);
                // 1-关闭模态框
                $('#addModal').modal('hide');
                // 2-重新渲染第一页
                currentPage = 1;
                render();
                // 3-表单重置
                // 重置表单的内容 和 验证效果
                $('#form').data('bootstrapValidator').resetForm(true);
                // 手动重置 下拉列表 和 图片
                $('.cate-text').text('请选择一级分类');
                $('.logo').attr('src', './images/default.png');
            }
        })
    })

})